<!-- 用户 -->
<template>
  <q-page class="q-px-xs">
    <q-splitter :model-value="200" unit="px" :horizontal="$q.screen.xs">
      <template #before>
        <q-tree
          v-model:selected="query.deptId"
          v-model:expanded="treeExpanded"
          :nodes="treeOptions"
          node-key="deptId"
          label-key="deptName"
          @update:selected="handleQuery"
        />
      </template>

      <template #after>
        <!-- 查询操作 -->
        <q-toolbar>
          <table-filter :model-value="query" @change="handleQuery" />
          <q-space />
          <q-btn icon="plus" color="primary" class="q-mr-sm" @click="handleAdd()">新增</q-btn>
          <q-btn v-has-role="['SuperAdmin']" icon="delete" color="error" :disable="!hasSelected" @click="handleDelete()"> 删除 </q-btn>
          <q-btn icon="excel" color="warning" :loading="exportLoading" class="q-ml-sm" @click="handleExport">导出</q-btn>
        </q-toolbar>

        <!-- 数据表格 -->
        <q-table :columns="columns" selection="multiple" v-bind="tableOptions">
          <template #body-cell-disabled="props">
            <q-td :props="props">
              <q-chip :color="props.row.disabled ? 'red-4' : ''" dense>{{ props.row.statusName }}</q-chip>
            </q-td>
          </template>
          <template #body-cell-action="props">
            <q-td :props="props">
              <q-btn round flat icon="edit" color="primary" @click="handleEdit(props.row.userId)" />
              <q-btn v-has-role="['SuperAdmin']" round flat icon="delete" color="error" @click="handleDelete(props.row.userId)" />
            </q-td>
          </template>
        </q-table>
      </template>
    </q-splitter>

    <!-- 表单窗口 -->
    <q-dialog v-model="dialog" persistent>
      <user-form :id="userId" :dept-id="query.deptId ?? undefined" :title="title" @close="closeDialog" @after-save="handleQuery" />
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { usePageQuery, useTable, useCrudList, useFormDialog } from 'src/composables';

  import { DeptDto, getDeptTree } from 'src/api/system/dept';
  import crudApi from 'src/api/system/user';
  import UserForm from './UserForm.vue';

  defineOptions({ name: 'User' });

  // 查询条件
  const query = usePageQuery({ deptId: null });

  // 表格数据
  const { tc, formatter } = useTable();
  const { tableOptions, handleQuery, hasSelected, handleDelete, exportLoading, handleExport } = useCrudList(crudApi, query, 'userId');
  const columns = [
    tc('deptId', '部门名称', 120, { field: 'deptName' }),
    tc('username', '用户名', 100),
    tc('nickname', '昵称', 100),
    tc('cellphone', '手机号码', 120, 'center'),
    tc('gender', '性别', 60, { align: 'center', field: 'genderName' }),
    tc('disabled', '用户状态', 80, 'center'),
    tc('createdBy', '创建人', 100, 'center'),
    tc('createdTime', '创建时间', 100, { format: formatter.date, align: 'center' }),

    tc('action', '操作', 85),
  ];

  const treeOptions = ref<DeptDto[]>([]);
  const treeExpanded = ref<IdType[]>([0]);
  onMounted(() => {
    getDeptTree().then((data) => {
      treeOptions.value = data;
      data.forEach((t) => {
        treeExpanded.value.push(t.deptId);
        t.children.forEach((c) => treeExpanded.value.push(c.deptId));
      });
    });
    handleQuery();
  });

  // 表单窗口
  const { dialog, title, id: userId, handleAdd, handleEdit, closeDialog } = useFormDialog('用户');
</script>

<style lang="scss" scoped></style>
